<template>
  <div class="container">
    <div class="main" v-if="showMain">
      <div class="banner-img">
        <img src="../assets/images/common/meeting_bg.png" alt="">
      </div>

      <div class="box-wrap">
        <!--用户信息-->
        <div class="group user-group">
          <template v-if="userInfo && userInfo.userId">
            <div class="user-info df-c">
              <image class="head-img" :src="userInfo.avatar || '../assets/images/common/default_head.png'" mode="aspectFill"></image>
              <div class="df1">
                <div class="fs20 fb">{{userInfo.nickname}}</div>
                <div class="mt5 c999">{{phone}}</div>
              </div>
              <div class="user-code df-c" @click="goCodePage">
                <img src="../assets/images/common/my_qrcode_white.png" alt="">
                <span class="ml5">会员码</span>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="user-info df-c" @click="goLoginAction">
              <img class="head-img" src="../assets/images/common/default_head.png">
              <div class="df1">
                <view class="fs18 c666">未登录</view>
              </div>
              <div class="right-arrow mr5"></div>
            </div>
          </template>

          <!--附近店铺-->
          <div class="store-wrap df-c" v-if="store" @click="openWebView('/store/near')">
            <span>附近药店：</span>
            <span class="df1">{{store.chainName}} 约{{store.distance}}KM</span>
            <i class="right-arrow"></i>
          </div>
          <!--nav-->
          <div class="nav-wrap">
            <div class="nav-item" @click="openWebView('/user/collect/Shop')">
              <div class="fs16 fb">{{baseInfo.favCount || 0}}</div><div class="fs13 c999 mt5">关注店铺</div>
            </div>
            <div class="nav-item" @click="openWebView('/user/red/redEnvelopes')">
              <div class="fs16 fb">{{baseInfo.pdCard && baseInfo.pdCard.amount || 0}}</div><div class="fs13 c999 mt5">关爱金</div>
            </div>
            <div class="nav-item" @click="openWebView('/user/coupon/couponList')">
              <div class="fs16 fb">{{baseInfo.voucherCount || 0}}</div><div class="fs13 c999 mt5">优惠券</div>
            </div>
            <div class="nav-item" @click="dev">
              <div class="fs16 fb">{{baseInfo.cardCount || 0}}</div><div class="fs13 c999 mt5">礼品卡</div>
            </div>
          </div>
        </div>

        <!--我的服务-->
        <div class="group service-group">
          <div class="group-title">我的服务</div>
          <div class="nav-wrap">
            <div class="nav-item" @click="openWebView('/index')">
              <img src="../assets/images/common/xcx_my_mall.png">
              <div class="fs12 c666">送药到家</div>
            </div>
            <div class="nav-item" @click="dev">
              <img src="../assets/images/common/xcx_my_integral.png">
              <div class="fs12 c666">积分商城</div>
            </div>
            <div class="nav-item" @click="openWebView('/user/card/cardList')">
              <img src="../assets/images/common/xcx_my_vip.png">
              <div class="fs12 c666">会员卡</div>
            </div>
            <div class="nav-item" @click="dev">
              <img src="../assets/images/common/xcx_my_coin.png">
              <div class="fs12 c666">电子币</div>
            </div>
            <div class="nav-item" @click="openWebView('/store/near')">
              <img src="../assets/images/common/xcx_more_stores.png">
              <div class="fs12 c666">附近门店</div>
            </div>
            <div class="nav-item" @click="openWebView('/chat/room')">
              <img src="../assets/images/common/xcx_more_news.png">
              <div class="fs12 c666">购药咨询</div>
            </div>
            <div class="nav-item" @click="openWebView('/search/home')">
              <img src="../assets/images/common/xcx_more_search.png">
              <div class="fs12 c666">实时找药</div>
            </div>
            <div class="nav-item" @click="openWebView('/user/order/list')">
              <img src="../assets/images/common/xcx_more_order.png">
              <div class="fs12 c666">我的订单</div>
            </div>
          </div>
        </div>

        <!--热门活动-->
        <div class="group activity-group" v-if="floor.length">
          <div class="group-title">热门活动</div>
          <div class="activity-wrap">
            <image class="activity-item"
                   v-for="(item, index) in floor" :key="index"
                   :src="item.banner && item.banner.advList[0] && item.banner.advList[0].advContent || ''"
                   mode="aspectFill" @click="openWebView('/floors?pageId=' + item.pageId + '&index=' + item.index)"></image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss" rel="stylesheet/scss">
  .main {
    .banner-img {
      width: 100%;
      height: 116px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .box-wrap {
      position: relative;
      top: -54px;
      padding: 0 12px 12px 12px;

      .group {
        margin-bottom: 12px;
        border-radius: 8px;
        background: #FFFFFF;
        .group-title {
          padding: 12px;
          font-size: 15px;
        }
        .nav-wrap {
          display: flex;
          .nav-item {
            flex: 1;
            text-align: center;
          }
        }
        &.user-group {
          padding: 12px;
          .user-info {
            position: relative;
            padding: 8px 8px 13px 8px;
            .head-img {
              width: 54px;
              height: 54px;
              margin-right: 13px;
              border-radius: 100%;
            }
            .user-code {
              position: absolute;
              right: -18px;
              padding: 12px;
              border-radius: 4px 0 0 4px;
              color: #FFFFFF;
              background: #FF851D;
              img {
                width: 20px;
                height: 20px;
              }
              &:after {
                content: '';
                position: absolute;
                bottom: -6px;
                right: 0;
                border-bottom: 6px solid transparent;
                border-left: 8px solid #9B6130;
              }
            }
          }

          .store-wrap {
            padding: 8px 12px;
            margin-bottom: 12px;
            border-radius: 4px;
            color: #AAAAAA;
            background: rgba(244,244,244,0.43);
          }

          .nav-wrap {
            .nav-item {
              padding: 8px 0;
            }
          }
        }

        &.service-group {
          .nav-wrap {
            flex-wrap: wrap;
            padding: 8px 0;
            .nav-item {
              flex: 25% 0 0;
              padding-bottom: 19px;
              img {
                width: 50px;
                height: 50px;
              }
            }
          }
        }

        &.activity-group {
          .activity-wrap {
            padding: 0 12px;
            .activity-item {
              height: 97px;
              width: 100%;
              margin-bottom: 12px;
              border-radius: 3px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }

</style>

<script>
  import {mapGetters, mapActions} from 'vuex'
  import goShare from '@/mixins/goShare'

  export default {
    mixins: [goShare],
    data() {
      return {
        options: {},
        baseInfo: {},
        floor: [],
        cancelObj: {}
      }
    },

    components: {
    },

    computed: {
      ...mapGetters(['location', 'scopeId', 'storeId', 'wxID', 'nearestChain', 'userInfo', 'sharePageUrl', 'shareUrl', 'openId']),
      store () {
        return this.nearestChain
      },
      showMain () {     //  是否显示界面
        if (this.scopeId && this.openId) {
          return true
        }
        return false
      },
      phone () {
        if (this.userInfo && this.userInfo.phone) {
          return this.$utils.secretMobile(this.userInfo.phone)
        }
        return ''
      }
    },

    watch: {
      scopeId (newVal) {
        if (newVal) {
          this.getHomePage()
          this.login().then(data => {
            this.goShareCondition('index')
          }, err => {})
        }
      },
      userInfo (newVal) {
        newVal && this.getUserIndex()
      }
    },

    methods: {
      ...mapActions(['updateAppSetting', 'loadShareUrl', 'login']),
      dev () {
        wx.showToast({
          title: '开发中，敬请期待！',
          icon: 'none',
          duration: 2000
        })
      },
      openWebView (route) {
        if (!this.scopeId || !this.openId) {
          return
        }
        if (!this.userInfo) {
          this.goLoginAction()
          return
        }

        if (route != '/index') {
          route = route.indexOf('?') > -1 ? route + '&' : route + '?'
          route += `lat=${this.location && this.location.latitude || ''}&lng=${this.location && this.location.longitude || ''}`
        }

        mpvue.navigateTo({
          url: `/pages/webview?route=${encodeURIComponent(route)}`
        })
      },
      // 前往登录
      goLoginAction () {
        wx.navigateTo({
          url: '/pages/register'
        })
      },
      //  前往会员码页面
      goCodePage () {
        wx.navigateTo({
          url: '/pages/vipCode'
        })
      },
      getHomePage () {
        this.$api.getHomePage({
          scopeId: this.scopeId,
          storeId: this.storeId,
        }).then(data => {
          this.floor = data.floor || []
        }, err => {})
      },
      getUserIndex () {
        if (!this.userInfo) {
          return
        }

        // wx.showLoading()
        this.cancelObj.request && this.cancelObj.request.abort()
        this.$api.userInfoIndex(this.cancelObj).then(data => {
          // wx.hideLoading()
          this.baseInfo = data || {}
        }, err => {
          // wx.hideLoading()
          err.msg && wx.showModal({
            title: '基本信息获取提示',
            content: err.msg,
            success: (res) => {}
          })
        })
      }
    },
    onLoad(options) {
      this.options = options
      this.updateAppSetting({
        indexOptions: options
      })

      this.loadShareUrl()
      // this.goShareCondition('index')

      //  每次重启首页都要重新登录
      if (this.scopeId) {
        this.getHomePage()
        this.login().then(data => {
          this.goShareCondition('index')
        }, err => {})
      }
    },
    onShow () {
      this.getUserIndex()
    },
    onHide () {
      this.cancelObj.request && this.cancelObj.request.abort()
    },
    //  转发设置
    onShareAppMessage() {
      return {
        title: '壹药臻选会员中心',
        desc: '',
        path: 'pages/index',
        success: () => {},
      }
    }
  }
</script>

